<template>
	<view style="height: 100%;" class="flex flex-dir-c">
		<u-tabs-swiper name="name" active-color="#333333" inactive-color="#666666"
			bg-color="none" ref="tabs1" :list="parames.tabs" :current="current" @change="tabsChange"
			:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		<swiper :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish" class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in parames.tabs"
				:key="index">
				<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
					<view style="border: 1px solid #fff;" v-if="parames.list.length">
						<view class="card" v-for="(item2,i) in parames.list" :key="i">
							<view>
								<view class="font-32">{{item2.s_time_text}}</view>
								<view class="flex flex-ai-c mt-30">
									<view class="mr-20 tag">线下活动</view>
									<view class="tag mr-20" style="color: #FF0000;border: 1px solid #FF0000;" v-if="item2.order_status == 0">
										待支付
									</view>
									<view class="tag" style="color: #FF0000;border: 1px solid #FF0000" v-else>
										{{filterActiveStatus(item2.active_status)}}
									</view>
								</view>
							</view>
							<view style="margin: 60rpx 0;">
								<u-line color="#E7E5E0" :hairLine="false" />
							</view>
							<view style="color: #666666;" class="font-24">
								<view class="font-28" style="color: #333333;">{{item2.activity_title}}</view>
					
								<view class="flex mt-30 flex-ai-c">
									<view class="mr-30">
										<u-icon name="map" size="30rpx" color="#999999"></u-icon>
									</view>
									<view class="f1">
										<view style="width: 300rpx;">
											{{item2.address}}
										</view>
									</view>
									<view @click="chooseAddr(item2)">
										<i-icon icon="xingzhuang" size="23rpx" type="b" />
										{{item2.distance_text}}
									</view>
								</view>
								<view class="flex flex-ai-c" style="margin: 30rpx 0;">
									<view class="mr-30"><i-icon icon="dianhua" size="24rpx" type="b" /></view>
									<view>{{item2.tel}}</view>
								</view>
								<view class="flex flex-ai-c">
									<view class="mr-30"><i-icon icon="time" size="24rpx" type="b" /></view>
									<view>{{item2.s_e_time_text}}</view>
								</view>
							</view>
							<view v-if="item2.order_status == 0">
								<view style="margin: 60rpx 0;">
									<u-line margin="60rpx 0" color="#E7E5E0" :hairLine="false" />
								</view>
								<view class="flex flex-ai-c flex-jc-sb">
									<u-count-down :timestamp="item2.timestamp" format="mm分ss秒自动关闭"></u-count-down>
									<view class="btn" @click.stop="goPay(item2.order_id)">去支付</view>
								</view>
							</view>
						</view>
					</view>
					<view class="def" v-else>
						<view style="margin: 120rpx 0 80rpx 0;text-align: center;">您目前没有活动报名</view>
						<view class="def-btn" style="margin-left: 57rpx;" @click="applyNow">即刻报名</view>
					</view>
					<u-loadmore bg-color="none" :status="parames.loadStatus" @loadmore="loadmore"
						v-if="parames.list.length"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive, ref, watch, computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import active from '../../api/active.js';
	let tabs1 = ref()
	let current = ref(0)
	let swiperCurrent = ref(0)
	let parames = reactive({
		list: [],
		tabs: [
			{
				name: '即将到来的活动'
			}, {
				name: '我的活动历史记录'
			}
		],
		page: 1,
		loadStatus: ''
	})
	watch(() => swiperCurrent.value, (index) => {
		reset()
	})
	const reset = () => {
		parames.list = []
		parames.page = 1
		activeList()
	}
	const moreStatus = (status : string) => {
		parames.loadStatus = status
	}
	const chooseAddr = (item : any) => {
		uni.openLocation({
			longitude: Number(item.lng),
			latitude: Number(item.lat),
			name: item.activity_title,
			address: item.address,
			success: (res) => {
				console.log('打开成功');
			},
			fail: (err) => {
				console.log(err);
			}
		})
		
	}
	const location = () => {
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: res => {
				uni.setStorageSync('address', {
					...uni.getStorageSync('address'),
					lat: res.latitude,
					lng: res.longitude,
				})
				activeList({
					...uni.getStorageSync('address'),
					lat: res.latitude,
					lng: res.longitude,
				})
			},
			fail: () => {
				activeList()
			}

		})
	}
	const activeList = async (addr ?: any) => {
		addr = addr ? addr : uni.getStorageSync('address')
		const res = await active.activeList({
			type: swiperCurrent.value + 1,
			lat: addr.lat || 0,
			lng: addr.lng || 0,
			page: parames.page,
			size: 10
		})
		res.data.map(v => {
			v.timestamp = differenceTime(v.createtime || 0) * 1000
		})
		parames.list = [...parames.list, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		parames.page += 1 // 当前页加1
	}
	const loadmore = () => {
		if (parames.loadStatus == 'nomore') return
		activeList()
	}
	const goPay = async (order_id : any) => {
		const res = await active.activePay({
			order_id: order_id
		})
		let payInfo : any = res.data.payRes
		uni.requestOrderPayment({
			...payInfo,
			success() {
				showMsg('支付成功')
				reset()
			},
			fail(err2) {
				if (err2.errMsg === 'requestPayment:fail cancel') {
					showMsg('您已取消支付')
				} else {
					showMsg('支付失败')
				}
			}
		})
	}
	const applyNow = () => {
		uni.switchTab({
			url: '/pages/tabs/activity'
		})
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		swiperCurrent.value = index;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const differenceTime = (time : any) => {
		// @ts-ignore
		let timestamp : any = (Date.parse(new Date())) / 1000; //计算当前时间戳
		// @ts-ignore
		let pastTime : any = (Date.parse(new Date(time))) / 1000 //创建时间
		let endtime = pastTime + 1800
		return endtime > timestamp ? endtime - timestamp : 0
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		swiperCurrent.value = current2;
		current.value = current2;
	}
	const filterActiveStatus = computed(() => {
		return (state : number) => {
			let text = ''
			switch (state) {
				case 0:
					text = '报名中'
					break
				case 1:
					text = '进行中'
					break
				case 2:
					text = '已结束'
					break
			}
			return text
		}
	})
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
	onLoad(() => {
		location()
	})
</script>

<style>
	page {
		height: 100%;

	}
</style>
<style lang="scss" scoped>
	.def {
		width: 654rpx;
		height: 393rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 3rpx rgba(225, 225, 225, 0.5);
		border: 2rpx solid #EEEFF0;
		position: absolute;
		top: 200rpx;
		left: 48rpx;

		.def-btn {
			text-align: center;
			width: 544rpx;
			height: 92rpx;
			background: #009943;
			line-height: 92rpx;
			color: #fff;
		}
	}
	.card {
		background: #F8F8F8;
		padding: 60rpx 42rpx;
		margin: 20rpx;
	
		.tag {
			width: 146rpx;
			height: 44rpx;
			border-radius: 4rpx;
			border: 1rpx solid #919191;
			font-size: 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.btn {
			width: 150rpx;
			height: 58rpx;
			border-radius: 30rpx;
			border: 1rpx solid #FF0000;
			color: #FF0000;
			text-align: center;
			line-height: 58rpx;
		}
	}
</style>